<template>
  <div class="navigation_bar flex juco-center alit-center">
    <div class="top flex alit-center juco-spa">
      <!-- 其他页面的路由 -->
      <div class="flex alit-center juco-spa top-router">
        <div class="route-item flex alit-center juco-center" v-for="item in navRouters" :key="item.id">
          <img src="http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/1aee08be-c717-4d84-af18-35cfb351c48a.png"
            alt="" />
          {{ item.label }}
        </div>
      </div>
      <!-- 去登陆 -->
      <div class="nav-login flex alit-center juco-spa">
        <!-- 跳转后台 -->
        <p>商家登录</p>
        <p>
          <!-- 注册分个人和企业 -->
          免费注册
        </p>
        <p>
          <!-- 直接登录 -->
          卖方登录
        </p>
      </div>
    </div>
    <!--  -->
    <div class="navigation flex alit-center juco-center">
      <!-- logo -->
      <div class="flex alit-center juco-spb navigation-logo">
        <div class="flex alit-center">
          <img src="http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/1aee08be-c717-4d84-af18-35cfb351c48a.png"
            alt="" class="logo-img" />
          <div class="nav-wrap flex alit-center">
            <ul>
              <li v-for="item in wrapRouter" :key="item.id">
                {{ item.label }}
              </li>
            </ul>
          </div>
        </div>
        <div class="nav-search flex alit-center">
          <p>我的参拍</p>
          <el-input v-model="navSearchValue" placeholder="搜索标的" style="max-width: 160px">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";

import { Search } from "@element-plus/icons-vue";

let router = useRouter();

// 搜索框绑定的值
let navSearchValue = ref("");

const navRouters = [
  {
    url: "",
    label: "自拍平台",
    value: "",
    id: 1,
  },
  {
    url: "",
    label: "司法自拍",
    value: "",
    id: 2,
  },
  {
    url: "",
    label: "金融自拍",
    value: "",
    id: 3,
  },
  {
    url: "",
    label: "破产自拍",
    value: "",
    id: 4,
  },
  {
    url: "",
    label: "工业自拍",
    value: "",
    id: 5,
  },
  {
    url: "",
    label: "汽车自拍",
    value: "",
    id: 6,
  },
];

const wrapRouter = [
  {
    url: "",
    label: "首页",
    value: "",
    id: 1,
  },
  {
    url: "",
    label: "标的",
    value: "",
    id: 2,
  },
  {
    url: "",
    label: "拍卖会",
    value: "",
    id: 3,
  },
  {
    url: "",
    label: "拍卖公告",
    value: "",
    id: 4,
  },
  {
    url: "",
    label: "拍卖企业",
    value: "",
    id: 5,
  },
  {
    url: "",
    label: "拍卖招商",
    value: "",
    id: 6,
  },
];

onMounted(() => {
  console.log(window.location.pathname, '测试Jenkins');
});
</script>

<style lang="less" scoped>
.navigation_bar {
  width: 100%;
  height: 125px;
  position: relative;
  background: #fff;
  position: relative;

  .top {
    width: 100%;
    height: 45px;
    line-height: 45px;
    position: absolute;
    top: 0;

    .top-router {
      width: 610px;
    }

    .route-item {
      width: 100px;
      height: 35px;
      background-color: #f36e6e;
      color: #fff;
      cursor: pointer;
      font-size: 18px;

      >img {
        width: 20px;
        height: 20px;
        object-fit: cover;
      }
    }

    .nav-login {
      width: 300px;
      height: 40px;

      >p {
        width: 120px;
        cursor: pointer;
        font-size: 18px;
      }

      >p:hover {
        color: red;
      }
    }
  }

  .navigation {
    width: 100%;
    height: 74px;
    position: absolute;

    top: 40px;
    border-top: 1px solid #c1393c;
    margin-top: 6px;

    .navigation-logo {
      width: 1500px;
    }

    .logo-img {
      width: 200px;
      height: 70px;
      object-fit: cover;
    }

    .nav-wrap {
      width: 600px;
      height: 40px;

      >ul {
        list-style: none;
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-around;
      }

      ul>li {
        margin-right: 12px;
        cursor: pointer;
        color: black;
        font-size: 18px;
        width: 80px;
      }

      ul>li:hover {
        color: red;
        scale: 1.05;
      }
    }

    .nav-search {
      // width: 280px;
      height: 40px;

      >p {
        width: 90px;
        font-size: 18px;
        margin-right: auto;
        cursor: pointer;
      }

      >p:hover {
        color: red;
        scale: 1.05;
      }
    }
  }
}
</style>
